<template>
  <el-descriptions
    :column="3"
    size="mini"
    border
  >
    <el-descriptions-item
      label="科目"
      :span="3"
    >
      <el-tag
        v-for="item in content.subjects"
        :key="item"
        size="mini"
        style="margin:1px 2px;border-radius:12px;"
      >{{item}}</el-tag>
    </el-descriptions-item>
    <el-descriptions-item
      label="加练科目"
      :span="3"
    >
      <el-tag
        v-for="item in content.failedSubjects"
        :key="item"
        type="danger"
        size="mini"
        style="margin:1px 2px;border-radius:12px;"
      >{{item}}</el-tag>
      <div v-if="content.failedSubjects.length==0">
        <i
          class="el-icon-success"
          style="color:#67C23A;margin-right:3px;"
        ></i>
        <span>无需加练</span>
      </div>
    </el-descriptions-item>
    <el-descriptions-item
      v-for="item in content.evaluations"
      :key="item.title"
      :label="item.title"
    >
      <el-rate
        :value="item.value"
        disabled
        show-score
        text-color="#ff9900"
      ></el-rate>
    </el-descriptions-item>
    <el-descriptions-item
      v-for="item in content.subjectsComments"
      :key="item.subject"
      :label="item.subject"
      :span="3"
    >
      <i
        v-if="item.pass=='是'"
        class="el-icon-success"
        style="color:#67C23A;margin-right:3px;"
      ></i>
      <i
        v-else
        class="el-icon-error"
        style="color:#F56C6C;margin-right:3px;"
      ></i>
      <span>{{item.comments.join(", ")}}</span>
    </el-descriptions-item>
    <el-descriptions-item
      label="教员评价"
      :span="3"
    >
      <span v-if="content.coachComments.length>0">
        {{content.coachComments}}
      </span>
      <span v-else>无</span>
    </el-descriptions-item>
    <el-descriptions-item
      label="学员自评"
      :span="3"
    >
      <span v-if="content.traineeComments.length>0">
        {{content.traineeComments}}
      </span>
      <span v-else>
        <i
          class="el-icon-warning"
          style="color:#E6A23C;margin-right:3px;"
        ></i>
        <span style="color:#E6A23C;font-weight:bold">
          学员未填写自评！
        </span>
      </span>
    </el-descriptions-item>
  </el-descriptions>
</template>

<script>
  export default {
    name: "resultDetail",
    props: {
      content: {
        type: Object,
        required: true
      }
    }
  }
</script>

<style>

</style>